<template>
  <el-card>
    <!-- 玩家列表 -->
    <div class="panel-area">
      <ul class="participants">
        <li v-for="(item, index) in nicknames" :key="index">
          <span>{{ item }}{{ item === nickname ? '(我)' : '' }}</span>
          <el-tag v-if="item === holder" size="mini">主持</el-tag>
        </li>
      </ul>
    </div>

    <!-- 按钮工具栏 -->
    <div class="panel-area button-area">
      <el-button type="primary" size="small" icon="el-icon-edit" v-if="!isGameStarted"
        @click="startGameHandler">主持游戏</el-button>

      <!-- 主持人 -->
      <el-button type="warning" size="small" icon="el-icon-delete" v-if="isGameStarted && nickname === holder"
        @click="stopGameHandler">终止游戏</el-button>

      <!-- 玩家 -->
      <el-button type="success" size="small" icon="el-icon-magic-stick" v-if="isGameStarted && nickname !== holder"
        @click="answerGameHandler">猜答案</el-button>

      <el-button type="danger" size="small" icon="el-icon-switch-button" @click="exitHandler">退出游戏</el-button>
    </div>

    <!-- 弹出框：主持人设置答案 -->
    <el-dialog title="请设置答案" :visible.sync="resultDialogVisible" width="30%">
      <el-input v-model="expectImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="resultDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框：答题人设置答案 -->
    <el-dialog title="请填写答案" :visible.sync="answerDialogVisible" width="30%">
      <el-input v-model="inputImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAnswerDialogHandler">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      resultDialogVisible: false,
      expectImageName: '',
      answerDialogVisible: false,
      inputImageName: ''
    }
  },
  computed: {
    ...mapState(['nicknames', 'nickname', 'holder']),
    ...mapGetters(['isGameStarted'])
  },
  methods: {
    startGameHandler() {
      // 1，显示弹框
      this.resultDialogVisible = true
      // 2，清空输入框内容
      this.expectImageName = ''
    },
    saveDialogHandler() {
      if (!this.expectImageName) {
        this.$message.error('答案设置不能为空')
        return
      }
      this.$store.dispatch('sendStartGame', this.expectImageName)
      this.resultDialogVisible = false
    },
    stopGameHandler() {
      this.$confirm('亲，你确定要终止游戏吗？', '温馨提示').then(() => {
        this.$store.dispatch('sendStopGame')
      }).catch(e => {
        console.log(e)
      })
    },
    answerGameHandler() {
      // 清空弹框，清空弹框内容
      this.answerDialogVisible = true
      this.inputImageName = ''
    },
    // 点击确定按钮
    saveAnswerDialogHandler() {
      // 检查答案是否为空
      if (!this.inputImageName) {
        this.$message.error('答案不能为空')
        return
      }
      // 发送消息到服务器
      this.$store.dispatch('sendAnswerGame', this.inputImageName)
      // 关闭弹窗
      this.answerDialogVisible = false
    },
    exitHandler() {
      this.$confirm('是否要退出游戏呢？', '温馨提示').then(() => {
        // 发出退出的请求
        this.$store.dispatch('sendUserLeave')
        // 跳转到登录
        this.$router.replace('/login')
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
</style>
